<template>
	<view class="content">
		<view class="gradient-bg">
			<!-- 渐变背景 -->
			<view class="list-card-wrap">
				<view class="flex-row-between" style="margin-bottom: 8rpx;">
					<view class="flex-row">
						<text class="white-text font-24">任务编号</text>
						<text class="white-text font-24" style="margin-left: 20rpx;">{{taskInfo.no}}</text>
					</view>
					<view class="tag tag-gray">{{taskInfo.storehouseLocationNo}}</view>
				</view>
				<view class="list-card">
					<view class="">
						<text class="black-text-34">{{taskInfo.productName}}</text>
						<text class="gray-text font-30">({{taskInfo.productNo}})</text>
					</view>
					<view class="content-blue flex-row">
						<view class="flex-column flex1">
							<text class="gray-text">总数量</text>
							<text class="black-text">{{taskInfo.totalQuantity}}</text>
						</view>
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">抽检数量</text>
							<text class="black-text">{{taskInfo.quantity}}</text>
						</view>
						<view class="split"></view>
						<view class="flex-column flex1">
							<text class="gray-text">已检数量</text>
							<text class="blue-text">{{taskInfo.inspectedQuantity}}</text>
						</view>
					</view>
					<view class="">
						<view class="flex-row-between">
							<text class="gray-text">创建时间</text>
							<text class="gray-text">{{taskInfo.createTime}}</text>
						</view>
						<view class="flex-row-between">
							<text class="gray-text">完成时间</text>
							<text class="gray-text">{{taskInfo.finishTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view scroll-y style="height: calc(100vh - 377rpx);"> -->
		<view class="table-wrap">
			<view v-for="(barcodeItem,index) in taskDetailBarcode" :key="index" >
				<view style="margin: 16rpx 0;">
					<text class="gray-text font-24">条码</text>
					<text class="black-text font-33">{{barcodeItem}}</text>
				</view>
				<zb-table :show-header="true" :columns="column" :fit="true" :border="true" :data="taskDetailGroupByBarcode[barcodeItem]">
					
				</zb-table>
			</view>
		</view>
		<!-- </view> -->

	</view>
</template>

<script>
	
	import {
		getTaskInfoById,
		getTaskDetail,
		getQualityItemList,
		saveDetailData,
		getTaskNgNum,
		completeTask
	} from "./api"
	
	export default {
		onLoad(option) {
			this.taskId = option.id;
		},
		created() {
				this.getTaskDetail();
		},
		data() {
			return {
				taskId:'',
				taskInfo:{},
				// 详情根据物料条码分组的对象
				taskDetailGroupByBarcode:{},
				taskDetailBarcode:[],
				qualityItem:[],
				column: [
					{ type:'index', label: '序号', align: 'center', width:54 },
					{
						name: 'itemName',
						label: '项目名称',
						fixed: false,
						width: 120,
						emptyString: '--'
					},
					{
						name: 'lowerLimitValue',
						label: '标准下限',
						sorter: false,
						align: 'right',
					},
					{
						name: 'upperLimitValue',
						label: '标准上限',
						sorter: false,
						align: 'right',
					},
					{
						name: 'actualValue',
						label: '实际值',
						sorter: false,
						align: 'right',
					},
					{
						name: 'qualityResult',
						label: '检验结果',
						sorter: false,
						align: 'right',
					}
					
				],
				tableData: [{
						name: '1',
						address: '222'
					},
					{
						name: '2',
						address: '222'
					},
					{
						name: '3',
						address: '222'
					},
				]
			}
		},
		methods: {
			getTaskDetail(){
				// 清空原始数据
				this.$set(this,'taskDetailGroupByBarcode',{});
				this.$set(this,'taskDetailBarcode',[]);
				this.$set(this,'qualityItem',[]);
				getTaskInfoById(this.taskId).then(res => {
					if (res.code == 200) {
						this.taskInfo = res.data
						// 查询质检任务对应的物料质检项
						getQualityItemList({
							productNo:this.taskInfo.productNo
						}).then(res => {
							if (res.code == 200) {
								this.qualityItem = res.rows;
							} else {
								res.msg && this.$modal.confirmClose(res.msg)
							}
						})
						// 继续查询质检任务明细项
						getTaskDetail({
							taskNo:this.taskInfo.no,
							pageNum:1,
							pageSize:99999
						}).then(res => {
							if (res.code == 200 && res.rows.length > 0) {
								res.rows.forEach((item) => {
									let barcode = item.barcode;
									if(this.taskDetailGroupByBarcode[barcode] && this.taskDetailGroupByBarcode[barcode].length > 0){
										// 如果已经存在，则在该对象下新增
										this.taskDetailGroupByBarcode[barcode].push(item);
									}else{
										let detailList = [];
										detailList.push(item);
										this.taskDetailBarcode.push(item.barcode);
										this.$set(this.taskDetailGroupByBarcode,barcode,detailList);
									}
								});
							} else if (res.code !== 200) {
								res.msg && this.$modal.confirmClose(res.msg)
							}
						})
					} else {
						res.msg && this.$modal.confirmClose(res.msg)
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped>

</style>
